<template>
  <el-card shadow='never'>
    <div solt='header'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-house"></i>首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主题内容 -->
    <el-table :data='list'
              border>
      <el-table-column type='index'
                       width='200px'
                       label='序号'>
      </el-table-column>
      <el-table-column prop='id'
                       label='ID'>
      </el-table-column>
      <el-table-column prop='authName'
                       label='权限名称'>
      </el-table-column>
      <el-table-column prop='path'
                       label='地址'>
      </el-table-column>
      <el-table-column label='村级'>
        <template slot-scope='scope'>
          <el-tag v-if='scope.row.level==0'
                  type='success'>一级</el-tag>
          <el-tag v-if='scope.row.level==1'
                  type='primary'>二级</el-tag>
          <el-tag v-if='scope.row.level==2'
                  type='danger'>三级</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: 'Rights',
  data() {
    return {
      list: [] //列表数据
    }
  },
  created() {
    this.getRightsLIst()
  },
  methods: {
    //获取权限列表
    async getRightsLIst() {
      const { data: res } = await this.$axios.get('/rights/list')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.list = res.data
    }
  }
}
</script>

<style>
</style>